<template>
  <div class="container">
    <div class="title">客户分配移交</div>
    <div class="contant">
      <div class="header">
        <el-form
          ref="headerSearchForm"
          :model="headerSearchForm"
          :inline="true"
        >
          <el-form-item label="客户名称" prop="name">
            <el-input v-model="headerSearchForm.name" placeholder="请输入">
            </el-input>
          </el-form-item>
          <el-form-item label="客户类型" prop="customerType">
            <el-input v-model="headerSearchForm.name" placeholder="请输入">
            </el-input>
          </el-form-item>
        </el-form>
        <el-row>
          <el-col :span="14">
            <el-button type="primary" class="gray-btn">分配</el-button>
            <el-button type="primary" class="gray-btn">移交</el-button>
          </el-col>
          <el-col :span="10" style="text-align: right">
            <el-button type="primary" class="gray-btn">查询</el-button>
            <el-button class="btn">重置</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="table-panle">
        <el-table :data="tableData">
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="序号" align="center" type="index">
          </el-table-column>
          <el-table-column
            prop="name"
            label="客户名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="customerClassify"
            label="客户分类"
            align="center"
          ></el-table-column>
           <el-table-column
            prop="customerType"
            label="客户类型"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="province"
            label="客户所属省份"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="location"
            label="业务总部所在地"
            align="center"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="pipeName"
            label="管户人名称"
            align="center"
          ></el-table-column>
           <el-table-column
            prop="assistantName"
            label="协管户人名称"
            align="center"
          ></el-table-column>
          <el-table-column label="操作" prop="operate" align="center">
            <template>
              <span style="color: #1f9bfd; cursor: pointer;margin-right: 10px;">编辑</span>
              <span style="color: #1f9bfd; cursor: pointer">删除</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="pageFn"
        style="float: right;"
      >
      </el-pagination>
    </div>
    <!-- 新增编辑弹框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      destroy-on-close
      width="700px"
    >
      <el-form ref="dialogForm" :model="dialogForm" label-width="180px">
        <el-form-item label="客户经理名称" prop="name">
          <el-input v-model="dialogForm.name" placeholder="请输入"> </el-input>
        </el-form-item>
        <el-form-item label="部门" prop="department">
          <el-select
            v-model="dialogForm.department"
            placeholder="请选择"
            size="mini"
            clearable
          >
            <el-option
              v-for="(item, index) in departmentData"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职级" prop="rank">
          <el-select
            v-model="dialogForm.rank"
            placeholder="请选择"
            size="mini"
            clearable
          >
            <el-option
              v-for="(item, index) in rankData"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="dialogForm.phone" placeholder="请输入"> </el-input>
        </el-form-item>
        <el-form-item label="电子邮箱" prop="email">
          <el-input v-model="dialogForm.email" placeholder="请输入"> </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" class="btn">取 消</el-button>
        <el-button type="primary" @click="handleOk" class="gray-btn"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total:1,
      headerSearchForm: {
        name: '',
        customerType:''
      },
      tableData: [
        {
          name: '鄂尔多斯市村镇银行',
          customerClassify: '公司业务部',
          customerType:'村镇银行',
          province: '内蒙古自治区',
          location: '内蒙古自治区鄂尔多斯市',
          pipeName: '1',
          assistantName: '2',
        },
       {
          name: '鄂尔多斯市村镇银行',
          customerClassify: '公司业务部',
          customerType:'村镇银行',
          province: '内蒙古自治区',
          location: '内蒙古自治区鄂尔多斯市',
          pipeName: '1',
          assistantName: '2',
        },
      ],
      dialogVisible: false,
      title: '',
      dialogForm: {
        name: '',
        department: '',
        rank: '',
        phone: '',
        email: '',
      },
      departmentData: [],
      rankData: [],
    }
  },
  methods: {
    editInfo() {
      this.title = '编辑'
      this.dialogVisible = true
    },
    add() {
      this.title = '新增'
      this.dialogVisible = true
    },
    pageFn(){}
  },
}
</script>

<style lang="scss" scoped>
.container {
  .title {
    font-size: 16px;
    font-weight: 700;
    line-height: 50px;
    background: #354060;
    padding-left: 20px;
    margin-bottom: 16px;
  }
  .contant {
    padding: 0 16px;
    .header {
      margin-bottom: 16px;
    }
    .table-panle{
      min-height: 500px;
    }
  }
}
.el-table ::v-deep th.el-table__cell {
  background-color: #1c2238 !important;
  color: #fff;
}
::v-deep {
  .el-dialog {
    border-top: 4px solid rgba($color: #1f9bfd, $alpha: 0.9);
    .el-dialog__header {
      border-bottom: 1px solid rgba(126, 163, 255, 0.3);
      padding: 0;
      height: 49px;
      line-height: 49px;
      padding-left: 16px;
    }
    .el-dialog__footer {
      border-top: 1px solid rgba(126, 163, 255, 0.3);
    }
  }
}
</style>
